<template style="background-color: #f0f8ff">
    <div style="color: rgb(255, 255, 255);margin-left: 20vh;margin-top: 2vh;display: inline-block;font-size: 2em;">
        <icon-font type="icon-fanhui" @click="$router.go(-1)"></icon-font>
    </div>
    <div style="margin-top: 2vh;display: inline-block">
        <a-page-header title="关注列表" sub-title="您可以在此页面查看您的关注的作者" />
    </div>
    <a-row type="flex" justify="left" align="middle">
        <a-col :xs="{ span: 20, offset: 4 }" :sm="{ span: 20, offset: 4 }" :md="{ span: 20, offset: 4 }" :lg="{ span: 20, offset: 4 }"
            :xl="{ span: 20, offset: 4 }">
            <div style="display: table; vertical-align: middle;margin-top: 4vh;">
                <p style="display: table-cell">
                    <a-typography-text>共关注{{ pagination.total }}个作者</a-typography-text>
                </p>
            </div>
        </a-col>
    </a-row>
    <a-row>
        <a-col :xs="{ span: 16, offset: 4 }" :sm="{ span: 16, offset: 4 }" :md="{ span: 16, offset: 4 }" :lg="{ span: 16, offset: 4 }"
            :xl="{ span: 16, offset: 4 }">
            <!-- 列表展示作者查询结果 -->
            <a-list item-layout="vertical" size="large" style="margin-top: 2vh;margin-bottom: 4vh;" :pagination="pagination"
                :data-source="authorDisplay" :split="false" :grid="{ column: 1 }">
                <template #footer>
                    <div>
                        The recommendation is based on our model, Shenyang The One Rec.
                    </div>
                </template>
                <template #renderItem="{ item }">
                    <a-list-item :key="item.anthor_id" text-overflow="ellipsis">
                        <a-card hoverable :bordered="true"
                            @click="$router.push('/author_info?author_id=' + item.author_id)">
                            <a-row>
                                <a-col :xs="{ span: 2 }" :sm="{ span: 2 }" :md="{ span: 2 }" :lg="{ span: 2 }" :xl="{ span: 2 }">
                                    <div>
                                        <a-avatar shape="square"
                                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                    </div>
                                </a-col>
                                <a-col :xs="{ span: 17 }" :sm="{ span: 17 }" :md="{ span: 17 }" :lg="{ span: 17 }" :xl="{ span: 17 }">
                                    <a-card-meta :title="item.author_name"><!-- 作者姓名、国际 -->
                                        <div v-if="highlightField === 'title'">
                                            <span v-html="highlight(item.author_name)"></span>
                                        </div>
                                        <div v-else>
                                            {{ item.author_name }}
                                        </div>
                                    </a-card-meta>
                                    <br>
                                    <div style="color:#acadae" slot="description"><icon-font type="icon-weizhi"></icon-font>
                                        {{ "中国" }}</div>
                                    <div style="color:#66aef5" slot="description"><icon-font type="icon-xuewei"></icon-font>
                                        {{ "自然科学" }}</div>
                                    <!-- <a-card-meta :description="item.domain"></a-card-meta> -->
                                    <!-- 作者从事的领域 -->
                                </a-col>
                                <a-col :xs="{ span: 3, offset: 1 }" :sm="{ span: 3, offset: 1 }" :md="{ span: 3, offset: 1 }"
                                    :lg="{ span: 3, offset: 1 }" :xl="{ span: 3, offset: 1 }"><!-- 作者文章的引用次数 -->
                                    <a-row justify="end">
                                        <div style="font-size:2.2em;color:#a31be8;font-weight: bold; ">{{ NumFormat(52633)
                                        }}</div>
                                    </a-row>
                                    <br>
                                    <a-row justify="end">
                                        <div style="font-size:1.3em;color:#1a045a">被引用次数</div>
                                    </a-row>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-list-item>
                </template>
            </a-list>
        </a-col>
    </a-row>
</template>
    

<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
import { interest_author } from '@/api/post/interest_author'
import { cloneDeep } from 'lodash-es'
import { icon_url } from '@/util/iconfont'
import dom_map from '@/constant/dom_map'
import globalVariable from '@/components/mathJax/globalVariable'
import ListItem from '@/components/card_components/ListItem'
import '@vuepic/vue-datepicker/dist/main.css'
import { useRoute, useRouter } from 'vue-router'

const IconFont = createFromIconfontCN({
    scriptUrl: icon_url
});

export default defineComponent({
    components: {
        IconFont,
        ListItem,
    },

    setup() {
        const state = reactive({
            loading: false,                 // 加载状态
            authorList: [],                  // 作者列表
            authorDisplay: [],               // 展示作者列表
            pagination: {
                //分页设置
                simple: true,
                defaultCurrent: 1,
                current: 1,
                defaultPageSize: 10,
                total: 0,
                onChange: (current) => {
                    state.loading = true
                    state.pagination.defaultCurrent = current
                    state.pagination.current = current
                    update()
                    console.log("应该后发生")
                    spinning.value = true
                },
            },
        })


        const spinning = ref(true)
        async function update() {
            // 调用搜索接口
            await interest_author().then(async (response) => {
                spinning.value = true
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.pagination.total = response.data.data.total
                    state.authorList = response.data.data.authorList
                    state.authorDisplay = cloneDeep(state.authorList)
                }
                spinning.value = false
            })
            console.log("应该先发生")
            await checkLaTex()
        }



        const checkLaTex = () => {
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
        }

        const route = useRoute()
        const router = useRouter()

        //模拟调用假接口传入表格数据
        onMounted(() => {
            update()
        })



        //数字实现三个为一组分隔开
        const NumFormat = (value) => {
            if (!value) return 0
            value = value.toFixed(2)
            var intPart = Math.trunc(value)// 获取整数部分
            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            return intPartFormat
        }

        return {
            ListItem,
            ...toRefs(state),
            NumFormat,
            spinning,
            dom_map,
            route,
            router
        };
    },
});
</script>


<style scoped >
.ul_list {
    margin: 0;
    padding: 0;

    li {
        list-style: none;
        border-radius: 8px;
        display: flex;
        overflow: hidden;
    }
}


.ant-card {
    font-size: 1em;
    line-height: 1.55;
    background: #fafdff;
    border-radius: 5px;
}

.ant-avatar {
    width: 7vh;
    height: 9vh;
}

:deep(.ant-page-header-heading-title) {
    color: rgb(255 255 255);
    font-weight: 520;
    font-size: 2em;
}

:deep(.ant-page-header-heading-sub-title) {
    color: rgb(255, 255, 255);
    font-size: 1em;
}</style>



